<template>
	<view class="main">
		<!-- <u-navbar title="" leftIconSize="0" :height="40" bgColor="rgba(0,0,0,0)" @click="getLeft"></u-navbar> -->
		<!-- <view class="status-bar">
		</view> -->
		<view class="tenTop">
			<view class="fan" @click="getLeft">
				<image src="../../static/nav_ico_more@2x.png" mode=""></image>
			</view>
			
			
		</view>
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="state.swiper" :current="state.current" :mode="state.mode"
					dots-styles="#fff" field="content" border="0" :selectedBackgroundColor='state.color' selectedBorder="0">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in state.swiper" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="center">
			<view class="titles">
				<view>{{state.data.title}}</view> 
				<view style="display: flex; align-items: center;">
					<view class="dao" v-if="state.data.is_guide=='1'">
						<image src="../../static/icon_daoyou@2x.png" mode=""></image>导游认证
					</view>
					<view class="geng">
						<image src="../../static/luntan_icon_dian@2x.png" mode="" @click="getMoreshow"></image>
						<view class="gengduo" v-if="state.moreShow" @click="getTan">
							<image src="../../static/icon_jvbao@2x.png " mode=""></image>举报
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				{{state.data.jieshao}}
			</view>
			<view class="fangd">
				<view class="ones" v-for="(v,k) in state.showLable" :style="{'background':v.color}">
					<image :src="v.icon_image" mode=""></image>{{v.lable}}
				</view>
				
			</view>
			<view class="times">
				{{state.data.createtime_text}}
			</view>
		</view>
		<view class="center">
			<view class="nian">
				<image src="../../static/icon_nian@2x.png" mode=""></image> <text>年龄：</text><text class="sui">{{state.data.age}}岁</text>
			</view>
			<view class="nian">
				<image src="../../static/icon_gao@2x.png" mode=""></image> <text>身高：</text><text class="sui">{{state.data.height}}cm</text>
			</view>
			<view class="nian">
				<image src="../../static/icon_jineng@2x.png" mode=""></image> <text>技能：</text><text class="sui">{{state.data.jieshao}}</text>
			</view>
			<view class="nian">
				<image src="../../static/vuesax.png" mode=""></image> <text>时间：</text><text class="sui">{{state.data.busihours}}</text>
			</view>
		</view>
		<view class="bottomsbox"></view>
		<view v-if="state.type=='1'">
			<navigator :url="'/pages/news/news?userId='+state.data.user_info.id+'&userimg='+state.data.user_info.avatar+'&username='+state.data.user_info.nickname+'&id='+state.id" class="bottoms" v-if="state.data.auth_type==3">
				<image src="../../static/icon_liao@2x.png" mode=""></image>聊一聊
			</navigator>
			<block v-if="state.data.auth_type==2">
				<view class="bottoms" @click="jiesuolet()" v-if="state.data.contact!='1'">
					<image src="../../static/icon_suo@2x.png" mode=""></image>解锁获取联系方式
				</view>
				<view class="bottoms"  @click="jiesuolet()" v-if="state.data.contact=='1'">
					<image src="../../static/icon_suo2@2x.png" mode=""></image>已解锁（点击查看）
				</view>
			</block>
		</view>
		<view v-if="state.type=='2'" class="bottombox">
			<view class="left" @click="deleUser">
				<text>删除用户</text>
			</view>
			<view class="right" @click="sheep.$router.go('/pages/user/information?type=2&id='+state.id)">
				<image src="../../static/icon_bianji@2x.png"></image>
				<text>编辑信息</text>
			</view>
		</view>
		<!-- 举报 -->
		<view class="tan" v-if="state.juShow">
			<view class="bgcen">
				<view class="times">
					用户举报
				</view>
				<view class="cha" @click="state.juShow=false">
					<image src="../../static/icon.png" mode="" ></image>
				</view>
				<view class="xuan">
					<view :class="state.juid==val.id?'onesmo':'ones'" v-for="(val,index) in state.juList" :key='index' @click="getXuan(val.id,val.name)">{{val.name}}</view>
				</view>
				<view class="buc">
					补充说明：
				</view>
				<view class="textens">
					<textarea class="textarea" heightRpx="50" lineCount='5' v-model="state.supplement" placeholder="请输入详细描述"></textarea>
				</view>
				<view class="juBao" @click="jb">
					举报
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	const state = reactive({
		show:false,
		titleStyle: 'fontWeight:bold',
		swiper: [],
		current: 0,
		color:'#fff',
		mode:'dot',
		dotsStyles:'#fff',
		juShow:false,
		moreShow:false,
		juList:[
		],
		id:'',
		juid:'',
		juNmae:'',
		supplement:"",
		data:{},
		showLable:[],
		type:'',
		showType:'1',
	});
	onLoad((options) => {
		state.id = options.id
		state.type = options.type
		getreport()
		info()
	});
	function deleUser(){
		uni.showModal({
			title: '确认删除',
			content: '你确定要删除这个数据吗？',
			confirmColor:'#1BDDD0',
			success(e) {
				if(e.confirm){
					dele()
				}
			}
		})
	}
	function jiesuolet(){
		if(state.data.contact=='1'){
			getTel()
		}else{
			uni.showModal({
				title:'解锁联系方式',
				content: '你确定要解锁联系方式吗？',
				confirmColor:'#1BDDD0',
				success(e) {
					if(e.confirm){
						getTel()
					}
				}
			})
		}
	}
	async function getTel(){
		console.log(uni.getStorageSync('token'))
		const {code,data} = await sheep.$api.zqzApi.getNews({
			token:uni.getStorageSync('token'),
			fabu_id:state.id
		})
		if(code=='1'){
			uni.showModal({
				title:'联系方式',
				content:data.tel,
				confirmColor:'#1BDDD0',
				confirmText:"复制",
				success(e) {
					if(e.confirm){
						uni.setClipboardData({
						  data: data.tel,
						})
					}
				}
			})
		}
	}
	async function dele(){
		const {code,data} = await sheep.$api.zqzApi.delePush({
			token:uni.getStorageSync('token'),
			id:state.id
		})
		if(code==1){
			uni.showToast({
			  title:'操作成功',
			  icon: 'none',
			  mask: true,
			  duration: 1000,
			});
			uni.navigateBack({
				delta:1,     
			});
		}
	}
	async function jb(){
		const {code,data} = await sheep.$api.zqzApi.violation({
			fabu_id:state.id,
			report_id:state.juid,
			report_name:state.juNmae,
			supplement:state.supplement
		})
		if(code==1){
			uni.showToast({
			  title:'操作成功',
			  icon: 'none',
			  mask: true,
			  
			});
			state.juShow = false
		}
	}
	// 转时间格式
	function setTime(time){
		let data = new Date(time)
		let nian = data.getFullYear()
		let yue = (data.getMonth()+1).toString().padStart(2,'0')
		let ri = data.getDate().toString().padStart(2,'0')
		let shi = data.getHours().toString().padStart(2,'0')
		let fen = data.getMinutes().toString().padStart(2,'0')
		let miao = data.getSeconds().toString().padStart(2,'0')
		var formattedDateTime = nian + '-' + yue + '-' + ri + ' ' + shi + ':' + fen + ':' + miao;
		return formattedDateTime
	}
	// 获取详情
	async function info(){
		const {code,data} = await sheep.$api.zqzApi.info({
			fabu_id:state.id
		})
		if(code==1){
			state.swiper = data.banner_arr
			state.data = data
			state.showLable=data.lable_arr.show_lable
		}
	}
	// 举报类型
	async function getreport() {
		const {code,data} = await sheep.$api.test.report({
		})
		if (code == 1) {
		   state.juList=data
		   if(data.length>0){
			   state.juid = data[0].id
			   state.juNmae = data[0].name
		   }
		}
	}
	function getXuan(id,name){
		state.juid=id
		state.juNmae = name
	}
    // 点击更多
	function getMoreshow(){
		state.moreShow = !state.moreShow
	}
	function getTan(){
		state.moreShow=false
		state.juShow = !state.juShow
	}
	//返回上一页
	function getLeft() {
		uni.navigateBack({
			delta: 1, //返回层数，2则上上页
		})
	}
	function select(e) {
		this.tabed = e
	}
</script>

<style lang="scss">
	.status-bar {
	  height: var(--status-bar-height);
	  width: 100%;
	}
	.bottombox{
		display: flex;
		justify-content: space-between;
		width: calc(100% - 64rpx);
		height: 96rpx;
		position:fixed;
		left: 32rpx;
		bottom: 20rpx;
	}
	.bottombox .left{width: calc(50% - 12rpx); border: 1rpx solid #999; height: 96rpx; display:flex; justify-content: center; align-items: center; border-radius: 54rpx; background-color: #fff;color: #999;}
	.bottombox .right{width: calc(50% - 12rpx); border: 1rpx solid #333; height: 96rpx; display:flex; justify-content: center; align-items: center; border-radius: 54rpx; background-color: #fff;}
	.bottombox .right image{width: 48rpx; height: 48rpx; margin-right: 5rpx;}
	.tan{
		width:100%;
		height:100vh;
		position: fixed;
	    top:0;
		left:0;
		background: rgba(0,0,0,0.4);
		.bgcen{
			width: 100%;
			height: 800rpx;
			background: #fff;
			position:absolute;
			bottom:0;
			border-radius: 16rpx 16rpx 0 0;
			.xuan{
				width:calc(100% - 64rpx);
				margin: 20rpx auto;
				overflow:hidden;
				display: flex;
				 justify-content:space-between;
				 flex-wrap:wrap;
				.ones{
					width: 45%;
					line-height:80rpx;
					text-align:center;
					border: 1px solid #EFEFEF;
					border-radius: 12rpx;
					margin: 20rpx 0;
				}
				.onesmo{
					width: 45%;
					line-height:80rpx;
					text-align:center;
					color:#1BDDD0;
					border: 1px solid #1BDDD0;
					border-radius: 12rpx;
					margin: 20rpx 0;
				}
			}
			.buc{
				width:calc(100% - 64rpx);
				margin: 20rpx auto;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.textens{
				padding:24rpx;
				width:calc(100% - 104rpx);
				height: 80px;
				margin: 0 auto;
				background: #FFFFFF;
				border-radius: 12px 12px 12px 12px;
				border: 1px solid #EFEFEF;
				.textarea{
					width: 100%;
					height: 80px!important;
				}
				
			}
			.juBao{
				width:calc(100% - 64rpx);
				margin:50rpx auto;
				background: #1BDDD0;
				color:#fff;
				border-radius: 54rpx;
				line-height: 92rpx;
				text-align: center;
			}
			.times{
				text-align: center;
				width: 100%;
				line-height: 80rpx;
				font-weight: bold;
				border-bottom: 1px solid #EFEFEF;
			}
			.cha{
				position: absolute;
				top:20rpx;
				right:20rpx;
				image{
					width: 40rpx;
					height:40rpx;
				}
			}
		}
	}
	.tenTop{
		width: 100%;
		position: fixed;
		background:rgba(0,0,0,0);
		z-index: 999;
		// height:50px;
		padding-top:var(--status-bar-height);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.fan{
			margin:20rpx;
			image{
				width: 48rpx;
				height:42rpx;
			}
		}
		
	}
	.bottoms{
		width: calc(100% - 48rpx);
		position: fixed;
		bottom:20rpx;
		left:24rpx;
		border-radius:54rpx;
		border:1px solid #333333;
		line-height: 92rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 32rpx;
		font-weight: bold;
		image{
			width: 48rpx;
			height:48rpx;
			margin-right: 10rpx;
		}
	}
	.bottomsbox{
		width: 100%; height: 120rpx;
	}
	.center{
		width: calc(100% - 96rpx);
		margin: 20rpx auto;
		overflow: hidden;
		background: #fff;
		padding:24rpx;
		border-radius:24rpx;
		.nian{
			display: flex;
			// justify-content: center;
			align-items: center;
			color: #999999;
			margin:20rpx 0;
			image{
			   width: 32rpx;
			   height: 32rpx;
			   margin-right: 10rpx;
			}
			.sui{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
		.fangd{
			display: flex;
			.ones{
				display: flex;
				// background: rgba(254, 80, 56, 0.10);
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				border-radius: 30rpx;
				padding:10rpx 20rpx;
				margin:20rpx 0;
				margin-right: 10rpx;
				image{
					width: 32rpx;
					height:32rpx;
					margin-right:10rpx;
				}
			}
		}
		.titles{
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom:16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.dao{
				color: #64D973;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
				background:rgba(100, 217, 115, 0.10);
				padding:10rpx;
				border-radius: 30rpx;
				image{
					width: 32rpx;
					height:32rpx;
				}
			}
			
		}
		.content{
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.times{
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	.swiper-box {
		height: 375px;
	}
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 375px;
		color: #fff;
		image{
			width: 100%;
			height:375px;
		}
	}
	page {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;
	}

	.main {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;
	}

	.marTop {
		margin-top: 90rpx;
	}
	.geng{
		margin-left: 10rpx;
		position: relative;
		.gengduo{
			box-shadow: 0 0 5rpx 3rpx rgba(0,0,0,0.4);
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			right:0;
			width: 200rpx;
			text-align: center;
			border-radius: 16rpx;
			position: absolute;
			background: #FFF;
			padding:10rpx;
		    image{
				width:32rpx;
				height:32rpx;
				margin-right: 10rpx;
			}
		}
		image{
			width: 48rpx;
			height:42rpx;
		}
	}
</style>